<template>
  <el-card class="page-card">
    <div class="search-box">
      <el-input class="search-input" v-model="listQuery.fileName"  placeholder="请输入文件名" @keyup.enter="handleSearch" />
      <el-select
          v-model="listQuery.fileType"
          placeholder="请选择文件类型"
          clearable
          class="search-input"
          @change="handleSearch"
      >
        <el-option
            v-for="item in fileTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-button @click="handleSearch" type="primary">搜索</el-button>
      <upload @uploadSuccess="handleSearch"></upload>
    </div>
  </el-card>
  <el-card class="page-card">
    <el-table :data="list" height="450" border stripe>
      <el-table-column prop="fileName" header-align="center" align="center" label="文件名"></el-table-column>
      <el-table-column prop="fileType" header-align="center" align="center" label="文件类型"></el-table-column>
      <el-table-column prop="fileSize" header-align="center" align="center" label="文件大小"></el-table-column>
      <el-table-column prop="userId" header-align="center" align="center" label="上传人"></el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="上传时间"></el-table-column>
      <el-table-column v-if="store.state.userInfo.role === 'admin'" header-align="center" align="center" label="操作">
        <template #default="scope">
          <el-button
              link
              type="primary"
              size="small"
              @click.prevent="handleDelete(scope.row.id)"
          >
            查看
          </el-button>
          <el-button
              link
              type="primary"
              size="small"
              @click.prevent="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: end">
      <el-pagination
          v-model:current-page="listQuery.page"
          size="small"
          background
          layout="prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="mt-4"
      />
    </div>
  </el-card>
</template>

<script setup>
import request from "@/utils/request";
import { ref } from 'vue';
import { useStore } from 'vuex';
import Upload from '@/components/upload.vue'
import {ElMessage, ElMessageBox} from "element-plus";
const store = useStore();
const listQuery = ref({
  page: 1,
  pageSize: 10,
  fileName:undefined,
  fileType:undefined,
});
const fileTypeOptions = [
  { label:'PDF', value:'PDF'},
  { label:'Image', value:'Image'},
  { label:'word', value:'word'}
]
const list = ref([]);
const total =ref(0)
const getList = async () => {
  try {
    const res = await request.get('/file/list', {
      params: listQuery.value
    });
    list.value = res.data.list;
    total.value = res.data.total;
  } catch (error) {
    console.log(error);
  }
}
const handleSearch = async () => {
  listQuery.value.page = 1
  await getList()
};
const handleSizeChange = () => {
  getList()
}
const handleCurrentChange = () => {
  getList()
}
const handleDelete = (id) => {
  ElMessageBox.confirm(
      '请确认是否删除该文件?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning',
      }
    ).then(async () => {
    try {
      await request.delete(`/file/delete/${id}`,);
      ElMessage.success('删除成功');
      await handleSearch();
    } catch (error) {
      console.log(error);
    }
  }).catch(() => {})
}
handleSearch()
</script>
<style  scoped>
.page-card{
  padding: 10px;
  margin: 10px;
}
.search-box{
  display: flex;
  gap: 10px;
}
.search-input{
  width: 150px !important;
}
</style>
